<!-- 从业者端-我的-工作经历-->
<template>
	<view class="container">
		
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode"  @confirm="confirm"></u-picker>

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form" :rules="rules">

        <!-- 公司名称 -->
<!-- 				<u-field v-model="form.companyName" label="公司名称：" label-width="160" prop="companyName" placeholder="请输入公司名称"
					:placeholder-style="placeholderStyle" >
				</u-field> -->
				<view class="form-section">
					<u-form-item label="公司名称" prop="name" label-width="160" >
						<u-input v-model="form.companyName" placeholder="请输入公司名称" clearable />
					</u-form-item>
				</view>

				<!-- 职位名称 -->
				<!-- </u-form-item> -->
	<!-- 			<u-field v-model="form.businessType" label="职位名称：" label-width="160"  placeholder="请输入职位名称"
					:placeholder-style="placeholderStyle" >
				</u-field> -->
				<view class="form-section">
					<u-form-item label="职位名称" prop="name" label-width="160" >
						<u-input v-model="form.businessType" placeholder="请输入职位名称" clearable />
					</u-form-item>
				</view>

				<!-- 入职时间 -->
		<!-- 		<u-field v-model="form.starTime" label="入职时间：" label-width="160" placeholder="请选择入职时间"
					:placeholder-style="placeholderStyle" @click="isShowPicker('starTime')" >
				</u-field> -->
				<view class="form-section">
					<u-form-item label="入职时间" prop="startDate" label-width="160">
						<u-input v-model="form.starTime" placeholder="入职时间" clearable @click="isShowPicker('starTime')" :focus="false"  disabled/>
					</u-form-item>
				</view>

				<!-- 离职时间 -->
<!-- 				<u-field v-model="form.endTime" label="离职时间：" label-width="160" placeholder="请选择离职时间"
					:placeholder-style="placeholderStyle" @click="isShowPicker('endTime')" >
				</u-field> -->
				<view class="form-section">
					<u-form-item label="离职时间" prop="startDate" label-width="160">
						<u-input v-model="form.endTime" placeholder="离职时间" clearable @click="isShowPicker('endTime')" :focus="false"  disabled/>
					</u-form-item>
				</view>

				<!-- 工作介绍 -->
				<view class="introduction">
					<view class="header">
						<!-- text class="required">*</text> -->
						<text class="title">工作介绍</text>
					</view>
					<view class="textarea-container">
						<u-input v-model="introduction" type="textarea" placeholder="请输入工作介绍内容" height="800" maxlength="1000"
							@input="handleInput" :clearable="clearable" />
						<view class="word-count">
							{{ currentCount }}/1000
						</view>
					</view>
				</view>
			</u-form>

			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="default" @click="handleSubmit" :custom-style="btuStyle" shape="circle" :loading="loading">
					保存
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//按钮统一色彩
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
					marginRight: '20rpx',
				},
				loading: false,
				clearable: false,
				// 弹出窗口内容
				show: false,
				mode: "time",
				NumberValue: 0,
				// field控件的样式
				placeholderStyle: "color:#bcbcbc",
				required: true,
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx'
				},
				
				form: {		
					gzcode: '',
					companyName: '',
					businessType: '',
					starTime: '', ///入职时间
					endTime: '' ///离职时间
				},
				// 企业介绍输入框
				introduction: '',
				currentCount: 0,
				maxCount: 1000,
				// 验证
				rules: {
					companyName: [{
						required: true,
						message: '请输入工作名称',
						trigger: 'blur'
					}]
				}
			}
		},
		onLoad(options) {
			this.form.gzcode = options.code	
			console.log('options',this.form.gzcode)
		},
		onShow() {			
			// gzid为0时表示是添加新工作经历
			if(this.form.gzcode) {
				this.$u.api.queryjlgz({
					jlgzcode: this.form.gzcode
				}).then(res =>{	
					console.log('工作经历-onshow：', res);
					const wordId = res.data.base_info
					this.form.gzcode = wordId.jlgz_code
					this.form.companyName = wordId.jlgz_gongsiname
					this.form.businessType = wordId.jlgz_zhiweiname
					this.form.starTime = wordId.jlgz_indate
					this.form.endTime = wordId.jlgz_outdate
					this.introduction = wordId.jlgz_workdetail
				})
			}
		},
		methods: {
			// 显示经营类型弹窗
			isShowPicker(value) {
				this.NumberValue = value;
				this.mode = "time"
				// if (value == 0) {
				// 	this.NumberValue = value;
				// 	this.mode = "selector";
				// 	this.range = ['有限责任公司', '股份有限公司', '个体工商户', '其他'];
				// 	this.defaultSelector = [0];
				// } else if (value == 1) {
				// 	this.NumberValue = value;
				// 	this.mode = "selector";
				// 	this.range = ['营业中', '暂停营业'];
				// 	this.defaultSelector = [0];
				// } else {
				// 	this.NumberValue = value;
				// 	this.mode = "region"
				// 	// this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
				// 	// this.defaultSelector = [0, 0, 0];
				// }
				this.show = true
			},

			// 计算企业介绍内字数
			handleInput() {
				// 计算当前字数（考虑中文和符号）
				this.currentCount = this.introduction.length

				// 如果超过最大字数，截取前1000个字符
				if (this.currentCount > this.maxCount) {
					this.introduction = this.introduction.substring(0, this.maxCount)
					this.currentCount = this.maxCount
				}
			},

			// 选择确认
			confirm(e) {
				if (this.NumberValue == 'starTime') {
					this.form.starTime = e.year+'-'+e.month+'-'+e.day;
				} else {
					// this.form.businessAddress = e.province.label + '-' + e.city.label + '-' + e.area.label;
					this.form.endTime = e.year+'-'+e.month+'-'+e.day;
				}
			},

			// 上一步
			handlePrev() {
				// uni.navigateBack();
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/personMesume'
				});
			},

			// 提交
			handleSubmit() {	
				console.log('save:',this.form.gzcode)
				if( this.form.companyName == '') {
					uni.showToast({
					  title: `请完善工作经历信息`,
					  icon: 'none'
					})
					return						
				} else if(!this.form.gzcode) {
					this.loading = true;
					this.$u.api.createjlgz({
							"usercode": uni.getStorageSync('usercode'),
							"jlgzjlname": this.form.companyName,
							"jlgzjlzhiwei":this.form.businessType,
							"jlgzjlindate": this.form.starTime,
							"jlgzjloutdate": this.form.endTime,
							"jlgzjlworkdetail": this.introduction,
					}).then(res => {
						this.loading = false;
						uni.navigateTo({
							url: '/pages/Practitioner/personMesume/personMesume'
						});						
					})
				} else {
					this.$u.api.updatejlgz({
						"jlgzcode": this.form.gzcode,
						"jlgzjlname":this.form.companyName,
						"jlgzjlzhiwei":this.form.businessType,
						"jlgzjlindate":this.form.starTime,
						"jlgzjloutdate":this.form.endTime,
						"jlgzjlworkdetail":this.introduction						
					}).then(res => {
						uni.navigateTo({
							url: '/pages/Practitioner/personMesume/personMesume'
						});		
						
					})
				}
				
				
				// this.$refs.form.validate(valid => {					
				// 	console.log('工作经历：', valid)
				// 	// if (!valid) return;

				// 	// if (this.doorPhotos.length === 0) {
				// 	//   return this.$u.toast('请上传门头照');
				// 	// }



				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;

		.required {
			color: #f56c6c;
		}

		// .header {
		// 	margin-bottom: 40rpx;

		// 	.title {
		// 		font-size: 36rpx;
		// 		font-weight: bold;
		// 		color: #333;
		// 	}
		// }

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.introduction {
			padding: 10px 0rpx;
			background-color: #fff;

			.header {
				margin-bottom: 10rpx;
				display: flex;



				.title {
					// font-size: 36rpx;
					// font-weight: bold;
					color: #333;
				}
			}

			.textarea-container {
				position: relative;

				/deep/ .u-input__textarea {
					padding: 20rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 24rpx;
					color: #999;
					background-color: rgba(245, 245, 245, 0.7);
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
		}


		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			/deep/ .u-field {
				padding: 10px 0;
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 4rpx;
				}
			}

			.upload-section {
				margin-bottom: 40rpx;

				.upload-title {
					font-size: 28rpx;
					color: #606266;
					margin-bottom: 16rpx;
					display: block;

					// .required {
					// 	color: #f56c6c;
					// }
				}

				.upload-desc {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 320px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>